<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>忘记密码</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	</head>
	
	<link rel="stylesheet" href="/zc/css/style.css" />
	<link rel="stylesheet" href="/zc/css/login.css" />
	<script src="/zc/js/jquery.min.js"></script>
	<script src="/zc/js/layer.js"></script>
	<script src="/zc/js/flexible.js"></script>
	<script src="/zc/js/flexible_css.js"></script>
	<script src="/zc/js/template.js"></script>
	<script src="/zc/js/jq-slideVerify.js"></script>
	<style>
		/*#getcode, #mcode {
			position: absolute;
			right: 0;
			bottom: 1px;
			line-height: 1rem;
			color: #F65656;
			background: none;
			border: none;
		}*/
		.zcqh{
			width: 90%;
			margin: auto;
			display: flex;
			display: -webkit-flex;
			margin-top: .4rem;
		}
		.zcqh .zc1{
			color: #333;
			font-size: .45rem;
			height: .5rem;
		}
		.zcqh .zc1.active{
			color:#03BE87;
		}
		.login_mm input{
			width: 90%;
			margin: auto;
			border-radius: .2rem;
			border: 1px solid #F1F1F1;
			height: 1rem;
			line-height: 1rem;
		}
		.login_mm input,.login_mm button{
			display: block;
			float: left;
		}
		.login_mm .get_code{
			width: 70%;
			float: left;
		}
		.login_mm #getcode,.login_mm #emailcode{
			width: 25%;
			margin-left: 5%;
			background: #03BE87;
			border-radius: .2rem;
			border: 1px solid #03BE87;
			color: #fff;
		}
		.dlan button{
			width: 90%;
			border-radius: .1rem;
			position: fixed;
			left: 50%;
			bottom: 1rem;
			transform: translate(-50%);
		}
	</style>
	<body onresize="document.activeElement.scrollIntoView(true);">
		
		<div class="header">
			<span>忘记密码</span>
			<a href="javascript:history.go(-1)" class="return"></a>
		</div>
		<div style="height: 1rem;"></div>
		
		<div class="zcqh">
			<div class="zc1 active">手机找回</div>
			<div class="zc1" style="margin-left: .3rem;">邮箱找回</div>
		</div>
		
		<div class="login_srk sjzc">
			<div class="login_mm">
				<input class="phone" type="text" placeholder="请输入您的手机号" />
			</div>
			<div class="login_mm" style="overflow: hidden;width: 90%;margin: auto;">
				<input type="password" placeholder="请输入验证码" class="get_code">
				<button type="button" id="getcode" class="waves-effect">点击获取</button>
			</div>
		</div>
		
		<div class="login_srk yxzc" style="display: none">
			<div class="login_mm">
				<input class="mailbox" type="text" placeholder="请输入您的邮箱账号" />
			</div>
			<div class="login_mm" style="overflow: hidden;width: 90%;margin: auto;">
				<input type="password" placeholder="请输入验证码" class="email_code">
				<button type="button" id="emailcode" class="waves-effect">点击获取</button>
			</div>
		</div>
		
		<div class="dlan">
			<button class="next_b" type="button" data-type="1">下一步</button>
		</div>
		<script>
			$(function () {
				// 验证码
				$('#getcode').on('click', function(){
				var that = $(this);
				var mobile = $('.phone').val();
				if(!mobile) return layer.open({content:'请输入手机号码',skin: 'msg',
                time: 2});
					$.ajax({
						type: "POST",
						url: "/index/publics/sendcode",
						data: {mobile:mobile},
						success: function (res) {
							if (res.code=='0') {
								that.html('60s').attr('disabled', true);
								var timer = setInterval(function(){
									var num = parseInt(that.text());
									if (num <= 1) {
										that.html('重新发送').removeAttr('disabled');
										clearInterval(timer);
									} else {
										that.html(--num+'s');
									}
								}, 1000);
							}
							layer.open({content:res.message,skin: 'msg',
				                time: 2
				            });
						}
					});
				})
				$('.next_b').click(function (e) { 
					var phone = $('.phone').val();
					var code=$('.get_code').val();
					if(!phone) return layer.open({content:'请输入手机号码',skin: 'msg',
                time: 2});
					if(!code) return layer.open({content:'请输入验证码',skin: 'msg',
                time: 2});
					
					$.ajax({
						type: "POST",
						url: "/index/publics/yzm",
						data: {mobile:phone,code:code,type: 1},
						success: function (res) {
							if (res.code=='0') {
								
				            	window.location.href="qrcz.html?phone="+phone+'&code='+code;
							}else{

								layer.open({content:res.msg,skin: 'msg',
					                time: 2
					            });
							}
						}
					});
					
				});
			});
			
			
			$(function () {
				// 验证码
				$('#emailcode').on('click', function(){
				var that = $(this);
				var mobile = $('.mailbox').val();
				if(!mobile) return layer.open({content:'请输入邮箱账号',skin: 'msg',
                time: 2});
					$.ajax({
						type: "POST",
						url: "/index/publics/sendEmail",
						data: {email:mobile},
						success: function (res) {
							console.log(res)
							if (res.code==0) {
								that.html('60s').attr('disabled', true);
								var timer = setInterval(function(){
									var num = parseInt(that.text());
									if (num <= 1) {
										that.html('重新发送').removeAttr('disabled');
										clearInterval(timer);
									} else {
										that.html(--num+'s');
									}
								}, 1000);
							}
							layer.open({content:res.msg,skin: 'msg',
				                time: 2
				        	});
						}
					});
				})
				$('.next_b').click(function (e) { 
					var email = $('.mailbox').val();
					var code=$('.email_code').val();
					if(!email) return layer.open({content:'请输入邮箱账号',skin: 'msg',
                time: 2});
					if(!code) return layer.open({content:'请输入验证码',skin: 'msg',
                time: 2});
					window.location.href="qrcz.html?email="+email+'&code='+code;
				});
			});
			
			
			$(function(){
				$('.zc1').eq(0).click(function (e) { 
				e.preventDefault();
				$('.zc1').removeClass('active');
				$(this).addClass('active');
				$('.sjzc').show();
				$('.yxzc').hide();
				});
				$('.zc1').eq(1).click(function (e) { 
					e.preventDefault();
					$('.zc1').removeClass('active');
					$(this).addClass('active');
					$('.sjzc').hide();
					$('.yxzc').show();
				});
			})
		</script>
	</body>
</html>
